<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>旅游签证旅游首页</title>
    <link rel="stylesheet" href="../../css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/styleqz.css">
    
</head>
<body>


<div id='header' class="am-g am-topbar-fixed-top" style="padding:0 0;background:#ffaa43;height:auto;">
	<div  onclick="api.closeWin();"  class="am-u-sm-2" style="margin-top:12px;padding-left: 17px">
		<img  src="images/arr-l.png" style="height:14px;height: 18px;"/>
	</div> 
	<div class="am-u-sm-8 til" style="margin-top:13px;text-align:center;">
		<h1>签证旅游首页</h1>
	</div>
	<div class="am-u-sm-2" style="font-size: 20px;margin-top:10px;color:white;text-align:center;">

   </div>
   
</div>

<div class="am-g">
	<div class="am-u-sm-12" style="margin-top: 50px;">
	</div>
</div>

<div class="am-g" style="margin-top: 12px;" >
<div class="am-u-sm-12" style="background: white;">
	  	<div class="am-input-group am-input-group-primary" >
			<input type="text" id="search" value="" style="height:40px;border:none;border-radius:5px;border: 1px solid #ccc;" class="am-form-field" placeholder="输入要搜索的关键字">
			<span class="am-input-group-btn" >
				<button class="am-btn am-btn-default" style="margin-left:-5px; height:40px;border:none;border-radius:5px;" type="button"; onclick="search();">
					<span class="am-icon-search">搜索</span>
				</button>
			</span>
		</div>
  </div>
 </div>

<div class="am-u-sm-12" id="list">
	<!--<div id='header' class="am-g" style="margin-bottom:13px; border-bottom:2px solid #ccc;background: white;">
		<div class="am-u-sm-6" style="margin-top:12px;padding-left: 10px; text-align:left;">
	    	亚洲
		</div> 
		<div class="am-u-sm-6 til" style="margin-top:13px;text-align:right;" onclick="openWin('more', {'state':'亚洲'})">
	    	更多
		</div>
	</div>
	
	<div class="yazhou" id="list">
		<div class="guoqi01">
	        <img src="images/visa/tu4.png">
	        <div class="diming01">
	            	中国
	        </div>
	    </div>
	    
		<div class="guoqi01">
	        <img src="images/visa/tu4.png">
	        <div class="diming01">
	            	中国
	        </div>
		</div>
	    
		<div class="guoqi01">
			<img src="images/visa/tu4.png">
			<div class="diming01">
				中国
	        </div>
		</div> 
	</div>
	
	<div id='header' class="am-g clear" style="border-bottom:2px solid #ccc;background: white;">
		<div class="am-u-sm-6" style="margin-top:12px;padding-left: 10px; text-align:left;">
	    	欧洲
		</div> 
		<div class="am-u-sm-6 til" style="margin-top:13px;text-align:right;" onclick="openWin('more', {'state':'欧洲'})">
	    	更多
		</div>
	</div>
	
	<div class="ouzhou" id="list_europe">
		<div class="guoqi01">
			<img src="images/visa/tu4.png">
	        <div class="diming01">
				法国
	        </div>
	    </div>
	    
		<div class="guoqi01">
	        <img src="images/visa/tu4.png">
	        <div class="diming01">
	            法国
	        </div>
	    </div>
	
		<div class="guoqi01">
			<img src="images/visa/tu4.png">
			<div class="diming01">
	            法国
	        </div>
		</div>
	</div>
	
	<div id='header' class="am-g clear" style="border-bottom:2px solid #ccc;background: white;">
		<div class="am-u-sm-6" style="margin-top:12px;padding-left: 10px; text-align:left;">
	    	美洲
		</div> 
		<div class="am-u-sm-6 til" style="margin-top:13px;text-align:right;" onclick="openWin('more', {'state':'美洲'})">
	    	更多
		</div>
	</div>
	
	<div class="meizhou" id="list_america">
	    <div class="guoqi01">
			<img src="images/visa/tu4.png">
	        <div class="diming01">
	            美国
	        </div>
	    </div>
	    
		<div class="guoqi01">
			<img src="images/visa/tu4.png">
			<div class="diming01">
	            美国
	        </div>
	    </div>
	    
		<div class="guoqi01">
	        <img src="images/visa/tu4.png">
			<div class="diming01">
				美国
	        </div>
	    </div>
	</div>-->

</div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	var list = [];

	apiready = function(){
		loadData();
	};
	
	function loadData(){
		api.showProgress({
			title: '加载中...',
			modal: false
		});
		
		var url = serviceUrl + '/app/visa/home';
	
		$api.get(url, function(ret){
			api.hideProgress();
			
		    if(ret){
		    	list = eval(ret);
		    	showlist();
		    }
		  
		},'json');
		
	}
	
	function showlist(){
		var aHtml = '';
		
		if(list.length > 0){
		
			for(var i = 0; i < list.length; i++){
				var data = list[i];

				var countrylist = data.country;
				
				aHtml += '<div id="header" class="am-g clear" style="margin-bottom:12px;border-bottom:2px solid #ccc;background: white;">';
					aHtml += '<div class="am-u-sm-6" style="margin-top:12px;padding-left: 10px; text-align:left;">';
				    	aHtml += data.state;
					aHtml += '</div>';
					aHtml += '<div class="am-u-sm-6 til" style="margin-top:13px;text-align:right;" onclick="openWin(\'more\', {\'state\':\''+data.state+'\'})">';
				    	aHtml += '更多';
					aHtml += '</div>';
				aHtml += '</div>';
				
				for(var index = 0; index < countrylist.length; index++) {
					var country = countrylist[index];

					if(index == 0) {
						aHtml += '<div class="yazhou">';
					}
					
					aHtml += '<div class="guoqi01" onclick="entervisa('+i+','+index+')">';
				        aHtml += '<img src="' + serviceUrl+country.img + '">';
				        aHtml += '<div class="diming01">';
				        	aHtml += country.name;
				        aHtml += '</div>';
				    aHtml += '</div>';
					    
					if(index == countrylist.length-1) {
						aHtml += '</div>';
					}
				}
			}
		}
		
		$api.html($api.byId('list'), aHtml);
	}
	
	function entervisa(stateIndex, countryIndex){
		var data = list[stateIndex];
		var country = data.country[countryIndex];

		openWin('qianzheng', {'country':country.name});
	}
	
	function search(){
		
		var name = $api.byId('search').value;
		
		if(name == ''){
			alert('请输入国家名');
			return;
		}
		
		openWin('qianzheng', {'country':name});
	}
	
</script>

</html>